<template>
  <div>
    <el-table :data="tasklist" style="width: 100%" height="800">
      <el-table-column prop="taskName" label="任务名称"/>
      <el-table-column prop="processInstanceId" label="流程实例编号"/>
      <el-table-column prop="executionId" label="执行实力编号"/>
      <el-table-column prop="businessKey" label="业务号"/>
      <el-table-column prop="processName" label="流程名称"/>
      <el-table-column prop="starter" label="发起人"/>
      <el-table-column prop="assignee" label="办理人"/>
      <el-table-column prop="startTime" label="流程启动时间"/>
      <el-table-column label="操作">
        <template #default="scope" >
          <el-button size="small" type="primary" @click="dotask(scope.row)">办理</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="float: right;padding-top: 1%">
      <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          background layout="prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"/>
    </div>
  </div>
  <div id="deptCheckOutSideProject">
    <el-dialog v-model="outSideProjectFlag" fullscreen title="出差计划">
      <el-row>
        <el-col :span="16">
          <el-descriptions class="margin-top" :column="6" border>
            <el-descriptions-item label="姓名">
              {{outSideProjectCheck.fromManName}}
            </el-descriptions-item>
            <el-descriptions-item label="部门">
              {{outSideProjectCheck.sysDeptName}}
            </el-descriptions-item>
            <el-descriptions-item label="岗位">
              {{outSideProjectCheck.postName}}
            </el-descriptions-item>
          </el-descriptions>
          <div v-for="(item,index) in outSideProjectCheck.datePlan">
            <h4 style="float: left">{{item.date}}</h4>
            <div >
              <el-table v-for="(item2,index2) in item.times" :data="getTableData(item2)" style="width: 100%">
                <el-table-column prop="period" :label="index2 === 0 ? '时段' : ''" />
                <el-table-column prop="unit" :label="index2 === 0 ? '拜访单位' : ''" />
                <el-table-column prop="offices" :label="index2 === 0 ? '拜访科室' : ''" />
                <el-table-column prop="character" :label="index2 === 0 ? '拜访人物' : ''" />
                <el-table-column prop="objective" :label="index2 === 0 ? '拜访目的' : ''" />
                <el-table-column prop="transportation" :label="index2 === 0 ? '交通工具' : ''" />
              </el-table>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div style="height:80vh;overflow-y: scroll">
            <el-timeline>
              <el-timeline-item v-for="item in checkTimeInfos" center :timestamp="item.startTime" placement="top">
                <el-card>
                  <h4>{{item.taskName}}</h4>
                  <p>{{item.comment}}</p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-col>
      </el-row>
      <el-form-item label="审批意见">
        <el-input type="textarea" v-model="outSideProjectCheck.checkComment"></el-input>
      </el-form-item>
      <div style="">
        <el-button size="large" type="danger" @click="agree(outSideProjectCheck,false)">驳回</el-button>
        <el-button size="large" type="primary" @click="agree(outSideProjectCheck,true)">同意</el-button>
      </div>
    </el-dialog>
  </div>
  <div id="deptCheckOutSide">
    <el-dialog v-model="outSideFlag" fullscreen>
      <el-row>
        <el-col :span="16">
          <el-descriptions
              class="margin-top"
              :column="6"
              border>
            <el-descriptions-item label="姓名">
              {{deptoutSide.sysUserName}}
            </el-descriptions-item>
            <el-descriptions-item label="部门">
              {{deptoutSide.sysDeptName}}
            </el-descriptions-item>
            <el-descriptions-item label="岗位">
              {{deptoutSide.job}}
            </el-descriptions-item>
            <el-descriptions-item label="工作计划">
              {{deptoutSide.planeFlag ==1?'有':'无'}}
            </el-descriptions-item>
            <el-descriptions-item label="通过审批">
              {{deptoutSide.agreeFlag==1?'是':'否'}}
            </el-descriptions-item>
            <el-descriptions-item label="申请人">
              {{deptoutSide.sysUserName}}
            </el-descriptions-item>
            <el-descriptions-item label="出发时间">
              {{deptoutSide.departureTime}}
            </el-descriptions-item>
            <el-descriptions-item label="返回时间">
              {{deptoutSide.returnTime}}
            </el-descriptions-item>
            <el-descriptions-item label="出差性质">
              {{deptoutSide.evectionType}}
            </el-descriptions-item>
            <el-descriptions-item label="出发地">
              {{deptoutSide.departurePlace}}
            </el-descriptions-item>
            <el-descriptions-item label="目的地">
              {{deptoutSide.destinationPlace}}
            </el-descriptions-item>
            <el-descriptions-item label="交通工具">
              {{deptoutSide.transportation}}
            </el-descriptions-item>
          </el-descriptions>
          <el-form :model="deptoutSide" label-width="120px">
            <el-form-item label="出差计划">
              <el-input type="textarea" v-model="deptoutSide.evectionProject" readonly></el-input>
            </el-form-item>
            <el-form-item label="出差目的">
              <el-input type="textarea" v-model="deptoutSide.evectionTarget" readonly></el-input>
            </el-form-item>
            <el-form-item label="审批意见">
              <el-input type="textarea" v-model="deptoutSide.checkComment"></el-input>
            </el-form-item>
          </el-form>
          <div style="padding: 1rem">
            <el-button size="large" type="danger" @click="agree(deptoutSide,false)">驳回</el-button>
            <el-button size="large" type="primary" @click="agree(deptoutSide,true)">同意</el-button>
          </div>
        </el-col>
        <el-col :span="8">
          <div style="height:90vh;overflow-y: scroll">
            <el-timeline>
              <el-timeline-item v-for="item in checkTimeInfos" center :timestamp="item.startTime" placement="top">
                <el-card>
                  <h4>{{item.taskName}}</h4>
                  <p>{{item.comment}}</p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import {completeTask, getFromByProcessInstanceId, history, myTasks} from "../../api/task";
let tasklist = ref([]);
let pageNum = ref(1);
let pageSize = ref(18);
let total = ref(0);
let outSideFlag = ref(false);
let deptoutSide = ref({
  sysUserName:'',
  sysDeptName:'',
  sysUserid:'',
  sysDeptid:'',
  planeFlag:'',
  agreeFlag:'',
  departureTime:'',
  returnTime:'',
  evectionType:'',
  departurePlace:'',
  destinationPlace:'',
  evectionProject:'',
  evectionTarget:'',
  transportation:'',
  togetherMan:'',
  fromMan:'',
  deptLeader:'',
  job:'',
  taskId:'',
  checkComment:'',
});
let checkTimeInfos  = ref([]);
let outSideProjectFlag = ref(false);
let outSideProjectCheck = ref({})

onMounted(async () => {
  await getTaskList();
})

const getTaskList =async () =>{
  let res = await myTasks({pageNum: pageNum.value,pageSize :pageSize.value});
  tasklist.value =res.data.rows;
  total.value =res.data.total;
};
const handleCurrentChange = async (val: number) => {
  pageNum.value = val;
  await getTaskList()
}
const dotask = async(row) =>{
  let splitElement = row.formKey
 let res = await getFromByProcessInstanceId({processInstanceId:row.processInstanceId,formKey:row.formKey});
  checkTimeInfos.value = await history({taskId: row.taskId});
  console.log(checkTimeInfos.value)
  let parse = JSON.parse(res.formData);
  switch (splitElement) {
    case import.meta.env.VITE_OUTSIDE_Plan:

      outSideProjectCheck.value = parse;
      outSideProjectFlag.value = true;
      outSideProjectCheck.value.taskId = row.taskId;
      break;
    case import.meta.env.VITE_OUTSIDE_APPLAY:
      deptoutSide.value= parse;
      deptoutSide.value.taskId = row.taskId;
      outSideFlag.value =true;
      break;
    default:
      ElMessage.error("暂不支持审批该流程")
  }
}
const agree = async (flag, confrim) => {
  const myMap = new Map();
  myMap.set("comment", flag.checkComment);
  myMap.set("taskId", flag.taskId);
  if (confrim) {
    myMap.set("opinion", "true");
  } else {
    if (!flag.checkComment) {
      ElMessage.error("请填写审批意见");
      return;
    }
    myMap.set("opinion", "false");
  }
  const obj = Object.fromEntries(myMap);
  const res = await completeTask(obj);
  if (res.code == 200) {
    ElMessage.success(res.data);
    outSideProjectFlag.value = false;
    outSideFlag.value = false;
    await getTaskList();
  } else {
    ElMessage.error(res.msg);
  }
};

const getTableData=(item)=>{
  return [item];
}

</script>
<style scoped>

</style>

